import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as LabelStories from './Label.stories';

<Meta of={LabelStories} />

# Label

The Label component is a fundamental UI element used to provide clear text descriptions for form controls.
**While most form components accept a `label` prop, there are cases where you may need more flexibility or control — in such scenarios, you can use the Label component directly.**

It enhances usability by clearly identifying input fields and improves accessibility by properly associating labels with their corresponding form elements using htmlFor.
The component supports a range of customization options, including descriptions, hints, required indicators, disabled and invalid states, and visual weight variants.


## Usage

<Canvas of={LabelStories.Documentation} source={ { code: `
import React, { useState } from "react";
import { Label, Input } from "@webiny/admin-ui";

const LabelExample = () => {
    const [value, setValue] = useState("");

    return (
        <div className="mb-4 space-y-2">
            <Label
                id="full-name-label"
                htmlFor="full-name"
                text="Full Name"
                description="As shown on your government-issued ID"
                hint="Include middle name if applicable"
                required={true}
                value="Label value will be shown here"
                weight="strong"
                invalid={false}
                disabled={false}
            />

            <Input
                id="full-name"
                type="text"
                placeholder="e.g. John Michael Doe"
                required={true}
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
        </div>
    );
};

export default LabelExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Label/Label.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={LabelStories.Documentation} />

```tsx
import React, { useState } from "react";
import { Label, Input } from "@webiny/admin-ui";

const LabelExample = () => {
    const [value, setValue] = useState("");

    return (
        <div className="mb-4 space-y-2">
            <Label
                id="full-name-label"
                htmlFor="full-name"
                text="Full Name"
                description="As shown on your government-issued ID"
                hint="Include middle name if applicable"
                required={true}
                value="Label value will be shown here"
                weight="strong"
                invalid={false}
                disabled={false}
            />

            <Input
                id="full-name"
                type="text"
                placeholder="e.g. John Michael Doe"
                required={true}
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
        </div>
    );
};

export default LabelExample;
```
